<template>
  <div class="work-order-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>工单管理</h2>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-buttons">
      <el-button type="primary" @click="handleAdd(null)">
        <el-icon>
          <Plus />
        </el-icon>
        新增
      </el-button>
      <!-- <el-button type="success" @click="handleExport">
        <el-icon>
          <Download />
        </el-icon>
        导出
      </el-button> -->
      <el-button type="danger" :disabled="!hasSelectedItems" @click="handleBatchDelete">
        <el-icon>
          <Delete />
        </el-icon>
        删除
      </el-button>
    </div>
    <div>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="编码">
          <el-input v-model="model.WorkCode" clearable />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="model.Type" placeholder="请选择类型" clearable>
            <el-option label="正常" :value="1" />
            <el-option label="委外" :value="2" />
            <el-option label="自建工单" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="客户">
          <el-input v-model="model.Customername" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="model.States" placeholder="请选择状态" clearable>
            <el-option label="初始化" :value="1" />
            <el-option label="备料中" :value="2" />
            <el-option label="备料完成" :value="3" />
            <el-option label="已开工" :value="4" />
            <el-option label="暂停" :value="5" />
            <el-option label="完工" :value="6" />
            <el-option label="结案" :value="7" />
            <el-option label="已下发" :value="8" />
          </el-select>
        </el-form-item>
        <el-form-item label="来源">
          <el-select v-model="model.Scoure" placeholder="请输入来源e" clearable>
            <el-option label="MES" :value="1" />
            <el-option label="ERP" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadWorkOrderList">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 工单表格 -->

    <el-table border style="width: 100%" :data="tabletar" @selection-change="handleSelectionChange" v-loading="loading">


      <!-- 复选框列 -->
      <el-table-column type="selection" width="55" />

      <!-- 序号列 -->
      <el-table-column prop="index" label="序号" width="55" />

      <!-- 编码列 -->
      <el-table-column prop="workCode" label="编码" width="120">

      </el-table-column>

      <!-- 类型列 -->
      <el-table-column prop="type" label="类型" width="120">
        <template v-slot="scoped">
          <el-tag type="warning" v-if="scoped.row.type == 1">待处理</el-tag>
          <el-tag type="primary" v-if="scoped.row.type == 2">委外</el-tag>
          <el-tag type="success" v-if="scoped.row.type == 3">自建工单</el-tag>
        </template>

      </el-table-column>

      <!-- 客户列 -->
      <el-table-column prop="customername" label="客户" width="150">
        <template #header>
          <span>客户</span>
          <el-icon class="search-icon" @click="handleSearch('customer')">
            <Search />
          </el-icon>
        </template>
      </el-table-column>

      <!-- 产品主数据列 -->
      <el-table-column prop="productName" label="产品主数据" width="150">

      </el-table-column>

      <!-- 产线列 -->
      <el-table-column prop="processrouteName" label="工艺产线" width="120">

      </el-table-column>
      <!-- 产线列 -->
      <el-table-column prop="nameofproductionline" label="产线" width="120">

      </el-table-column>

      <!-- 状态列 -->
      <el-table-column prop="states" label="状态" width="120">
        <template v-slot="scoped">
          <el-tag type="warning" v-if="scoped.row.states == 1">初始化</el-tag>
          <el-tag type="primary" v-if="scoped.row.states == 2">备料中</el-tag>
          <el-tag type="success" v-if="scoped.row.states == 3">备料完成</el-tag>
          <el-tag type="warning" v-if="scoped.row.states == 4">已开工</el-tag>
          <el-tag type="primary" v-if="scoped.row.states == 5">暂停</el-tag>
          <el-tag type="success" v-if="scoped.row.states == 6">完工</el-tag>
          <el-tag type="warning" v-if="scoped.row.states == 7">结案</el-tag>
          <el-tag type="warning" v-if="scoped.row.states == 8">已下发</el-tag>

        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="计划时间">
        <template v-slot="scoped">
          {{ moment(scoped.row.startTime).format("YYYY-MM-DD") }}
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="计划结束时间">
        <template v-slot="scoped">
          {{ moment(scoped.row.endTime).format("YYYY-MM-DD") }}
        </template>
      </el-table-column>
      <el-table-column prop="workNum" label="数量"></el-table-column>
      <el-table-column prop="isSkipprocess" label="是否允许跳工序">
        <template v-slot="scoped">
          <el-tag type="warning" v-if="scoped.row.isSkipprocess == false">是</el-tag>
          <el-tag type="primary" v-else>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="scoure" label="来源"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="dingDanBianHao" label="订单编号"></el-table-column>
      <el-table-column prop="dingDanRiQi" label="订单日期">
        <template v-slot="scoped">
          {{ moment(scoped.row.dingDanRiQi).format("YYYY-MM-DD") }}
        </template>
      </el-table-column>
      <el-table-column prop="zongJinE" label="订单金额"></el-table-column>
      <el-table-column prop="zhuangTai" label="订单状态">
        <template v-slot="scoped">
          <el-tag type="warning" v-if="scoped.row.zongJinE == 0">待处理</el-tag>
          <el-tag type="primary" v-if="scoped.row.zongJinE == 1">已确认</el-tag>
          <el-tag type="success" v-if="scoped.row.zongJinE == 2">已完成</el-tag>
          <el-tag type="danger" v-if="scoped.row.zongJinE == 3">已取消</el-tag>
        </template>

      </el-table-column>

      <!-- 工序进度列 -->
      <!--       <el-table-column prop="processProgress" label="工序进度" width="300">
        <template #default="{ row }">
          <div class="process-progress-container">
            <div 
              v-for="(process, index) in row.processSteps" 
              :key="index" 
              class="process-step-item"
            >
              <div class="process-circle">
                <div class="circle-progress">
                  <span class="percentage-text">{{ process.percentage }}%</span>
                </div>
              </div>
              <div class="process-label">{{ process.name }}</div>
              <div 
                v-if="index < row.processSteps.length - 1" 
                class="process-connector"
              ></div>
            </div>
          </div>
        </template>
      </el-table-column> -->

      <!-- 数量列 -->
      <el-table-column prop="workNum" label="数量" width="100">
        <template #header>
          <span>数量</span>
          <el-icon class="search-icon" @click="handleSearch('quantity')">
            <Search />
          </el-icon>
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column label="操作" width="300" fixed="right">
        <template v-slot="scoped">
          <el-button type="primary" size="small" @click="pc(scoped.row)" :disabled="scoped.row.states == 8" v-show="shenState.is==false">
            下发
          </el-button>
             <el-button type="danger" size="small" @click="handleIssue(scoped.row.workId)">
            审核
          </el-button>
          <el-button type="warning" size="small" @click="handleAdd(scoped.row)">
            编辑
          </el-button>
          <el-button type="danger" size="small" @click="handleDelete(scoped.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="paing.PageIndex" v-model:page-size="paing.PageSize"
      :page-sizes="[10, 20, 30, 40]" :background="true" layout="total, sizes, prev, pager, next, jumper"
      :total="paing.totalCount" />



    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="logic.dialogVisible" :title="logic.dialogTitle" width="600px" :close-on-click-modal="false"
      align-center draggable>
      <el-form ref="formRef" :model="formData" label-width="120px">
        <!-- 编码 -->
        <el-form-item label="编码:" prop="code">
          <el-input v-model="formData.workCode" placeholder="系统自动生成" disabled />
        </el-form-item>

        <!-- 类型 -->
        <el-form-item label="类型:" prop="type">
          <el-select v-model="formData.type" placeholder="请选择类型" style="width: 100%">
            <el-option label="正常" :value="1" />
            <el-option label="委外" :value="2" />
            <el-option label="自建工单" :value="3" />
          </el-select>
        </el-form-item>
        <!-- 状态 -->
        <el-form-item label="状态:" prop="status">
          <el-select v-model="formData.states" placeholder="请选择状态" style="width: 100%">
            <el-option label="初始化" :value="1" />
            <el-option label="备料中" :value="2" />
            <el-option label="备料完成" :value="3" />
            <el-option label="已开工" :value="4" />
            <el-option label="暂停" :value="5" />
            <el-option label="完工" :value="6" />
            <el-option label="结案" :value="7" />
            <el-option label="已下发" :value="8" />
          </el-select>
        </el-form-item>


        <!-- 客户 -->
        <el-form-item label="客户:" prop="customer">
          <el-select v-model="formData.customerId" placeholder="请选择客户" style="width: 100%">
            <el-option v-for="item in custArray" :value="item.customerID" :label="item.customername" />
          </el-select>
        </el-form-item>

        <!-- 产品主数据 -->
        <el-form-item label="产品主数据:" prop="productMaster">
          <el-select v-model="formData.productId" placeholder="请选择产品主数据" style="width: 100%">

            <el-option v-for="item in ProductArray" :label="item.productName" :value="item.productid" />
          </el-select>
        </el-form-item>

        <!-- 工艺路线 -->
        <el-form-item label="工艺路线 :" prop="processRoute">
          <el-select v-model="formData.processroutId" placeholder="请选择工艺路线" style="width: 100%">

            <el-option v-for="item in processrouteArray" :label="item.processrouteName" :value="item.id" />
          </el-select>
        </el-form-item>

        <!-- 产线 -->
        <el-form-item label="产线:" prop="productionLine">
          <el-select v-model="formData.productionlineId" placeholder="请选择产线" style="width: 100%">

            <el-option v-for="item in proction_lineArray" :label="item.nameofproductionline"
              :value="item.productionlinePK" />
          </el-select>
        </el-form-item>
        <!-- 订单 -->
        <el-form-item label="订单:" prop="dingDanId">
          <el-select v-model="formData.dingDanId" placeholder="请选择订单" style="width: 100%">

            <el-option v-for="item in Orders" :label="item.shopname" :value="item.id" />
          </el-select>
        </el-form-item>


        <!-- 计划起止日期 -->
        <el-form-item label="计划起止日期:" prop="dateRange">
          <el-date-picker v-model="formData.startTime" type="date" range-separator="→" start-placeholder="开始日期"
            end-placeholder="结束日期" style="width: 100%" value-format="YYYY-MM-DD" />

        </el-form-item>
        <!-- 计划起止日期 -->
        <el-form-item label="计划起止日期:" prop="dateRange">
          <el-date-picker v-model="formData.endTime" type="date" range-separator="→" start-placeholder="开始日期"
            end-placeholder="结束日期" style="width: 100%" value-format="YYYY-MM-DD" />

        </el-form-item>

        <!-- 数量 -->
        <el-form-item label="数量:" prop="quantity">
          <el-input v-model="formData.workNum" placeholder="请输入数量" />
        </el-form-item>

        <!-- 是否允许跳工序 -->
        <el-form-item label="是否允许跳工序:" prop="allowSkipProcess">
          <el-radio-group v-model="formData.isSkipprocess">
            <el-radio :label="true">允许</el-radio>
            <el-radio :label="false">不允许</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 来源 -->
        <el-form-item label="来源:" prop="allowSkipProcess">
          <el-radio-group v-model="formData.scoure">
            <el-radio :label="1">Mes</el-radio>
            <el-radio :label="2">ERP</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 备注 -->
        <el-form-item label="备注:" prop="remarks">
          <el-input v-model="formData.remark" type="textarea" :rows="4" placeholder="请输入备注" resize="vertical" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Download, Delete, Search } from '@element-plus/icons-vue'
import { APIs, DingDanAPI } from '@/Http/http'
import moment from 'moment'
import { useRouter } from 'vue-router'
import router from '@/router'
// 接口类型定义
interface WorkOrder {
  id: number
  index?: number
  code: string
  type: string
  customer: string
  productMaster: string
  productionLine: string
  status: string
  processSteps: Array<{
    name: string
    percentage: number
  }>
  quantity: number
  processRoute?: string
  dateRange?: [Date, Date] | []
  allowSkipProcess?: boolean
  remarks?: string
}
const model = reactive({
  WorkCode: "",
  Type: "",
  Customername: "",
  States: "",
  Scoure: ""

})

const paing = reactive({
  PageIndex: 1,
  PageSize: 10,
  totalCount: 0,
  total: 1,


})
const pc=(row:any)=>{
  ElMessageBox.confirm(
    '确认下发吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      APIs.get("/api/WorkOrder/UpdateState", {
        params: { workId: row.workId }
      }).then(res => {
        if (res.data.code == 100) {
          ElMessage.success(res.data.msg);
           router.push("Prdu")
        }
        else {
          ElMessage.error(res.data.msg);
          return;
        }


      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })

}
// 响应式数据
const loading = ref(false)
const workOrderList = ref<any>([])
const selectedItems = ref<any>([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 对话框相关
const logic = reactive({
  dialogVisible: false,
  dialogTitle: "",
  isEdit: false,
  editingId: <number | null>(null)
})


// 表单数据
const formData = reactive({
  workId: 0,
  workCode: "",
  type: "",
  customerId: "",
  productId: "",
  processroutId: "",
  productionlineId: "",
  dingDanId: "",
  startTime: "",
  endTime: "",
  workNum: "",
  isSkipprocess: "",
  scoure: "",
  states: "",
  remark: "",
})
const shenState=reactive({
  is:false
})
// 表单验证规则
const formRules = {
  type: [{ required: true, message: '请选择类型', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
  productMaster: [{ required: true, message: '请选择产品主数据', trigger: 'change' }],
  processRoute: [{ required: true, message: '请选择工艺路线', trigger: 'change' }],
  productionLine: [{ required: true, message: '请选择产线', trigger: 'change' }],
  dingDanId: [{ required: true, message: '请选择订单', trigger: 'change' }],
  dateRange: [{ required: true, message: '请选择计划起止日期', trigger: 'change' }],
  quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }]
}

// 计算属性
const hasSelectedItems = computed(() => selectedItems.value.length > 0)

// 获取类型标签样式
const getTypeTagType = (type: string) => {
  switch (type) {
    case '正常': return 'success'
    case '委外': return 'warning'
    case '自建工单': return 'info'
    default: return ''
  }
}

// 获取状态标签样式
const getStatusTagType = (status: string) => {
  switch (status) {
    case '备料中': return 'primary'
    case '已开工': return 'warning'
    case '已完成': return 'success'
    default: return ''
  }
}
const tz=useRouter();
// 生成工单编码
const generateCode = () => {
  const timestamp = Date.now()
  return `WO${timestamp.toString().slice(-8)}`
}

const handleSelectionChange = (selection: any) => {
  selectedItems.value = selection

}

// 搜索功能
const handleSearch = async (field: string) => {
  try {
    loading.value = true
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 500))

    // 模拟搜索逻辑
    ElMessage.success(`搜索功能 - 字段: ${field}`)
    // 这里可以根据field进行实际的搜索过滤
    // 目前保持原有数据不变
  } catch (error) {
    ElMessage.error('搜索失败')
  } finally {
    loading.value = false
  }
}

// 新增按钮
const handleAdd = (row: any) => {
  logic.dialogVisible = true
  if (row == null) {
    logic.dialogTitle = '新增'

    logic.isEdit = false
    logic.editingId = null
    resetForm()
    GetCust();
    GetProduct();
    GetProcess();
    GetProction();
    GetOrder();
  }
  else {
    logic.dialogTitle = '编辑'
    logic.isEdit = true

    resetForm()
    GetCust();
    GetProduct();
    GetProcess();
    GetProction();
    GetOrder();
    // 反填数据
    formData.workId = row.workId
    formData.workCode = row.workCode
    formData.type = row.type
    formData.customerId = row.customerId
    formData.productId = row.productId
    formData.processroutId = row.processroutId
    formData.productionlineId = row.productionlineId
    formData.startTime = row.startTime
    formData.endTime=row.endTime
    formData.workNum = row.workNum
    formData.isSkipprocess = row.isSkipprocess
    formData.scoure = row.scoure,
      formData.states = row.states,
      formData.remark = row.remark,
      formData.dingDanId = row.dingDanId


  }


}
const Data=reactive({
    "personId": 0,
  "personName": ""
})
const handleIssue =(workId:any) => {
  APIs.post("/api/Write/AddShenPi",Data).then(res=>{
     if(res.data.code==100)
     {
        ElMessage.success("提交审核成功")
        shenState.is=true
        formData.states="8"
        tz.push({path:"/WorkReportView",query:{id:workId}})
     }

  })
}
const ShenHe = (workId:any) => {
 tz.push({path:"/WorkReportView",query:{id:workId}})
}

// 删除按钮
const handleDelete = (row: any) => {
  /* try {

    await ElMessageBox.confirm('确定要删除此工单吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    loading.value = true
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 800))
    
    // 模拟删除成功
    const index = workOrderList.value.findIndex(item => item.id === row.id)
    if (index > -1) {
      workOrderList.value.splice(index, 1)
      total.value--
    }
    ElMessage.success('删除成功')
  } catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    } else {
      ElMessage.info('已取消删除')
    }
  } finally {
    loading.value = false
  } */

  ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      APIs.delete("/api/WorkOrder/DelteWorkOrder", {
        params: { workid: row.workId }
      }).then(res => {
        if (res.data.code == 100) {
          ElMessage.success(res.data.msg);
          loadWorkOrderList()
        }
        else {
          ElMessage.error(res.data.msg);
          return;
        }


      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}

// 批量删除
const handleBatchDelete = async () => {
  /*   try {
      await ElMessageBox.confirm(`确定要删除选中的 ${selectedItems.value.length} 个工单吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      
      loading.value = true
      // 模拟API调用延迟
      await new Promise(resolve => setTimeout(resolve, 1000))
      
      // 模拟批量删除成功
      const selectedIds = selectedItems.value.map(item => item.id)
      workOrderList.value = workOrderList.value.filter(item => !selectedIds.includes(item.id))
      total.value = workOrderList.value.length
      selectedItems.value = []
      ElMessage.success('批量删除成功')
    } catch (error: any) {
      if (error !== 'cancel') {
        ElMessage.error('批量删除失败')
      } else {
        ElMessage.info('已取消删除')
      }
    } finally {
      loading.value = false
    } */
}

// 导出按钮
const handleExport = async () => {
  try {
    loading.value = true
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 1500))

    // 模拟导出功能
    ElMessage.success('导出功能开发中...')
    // 这里可以实现实际的导出逻辑
    // 比如生成CSV或Excel文件并下载
  } catch (error) {
    ElMessage.error('导出失败')
  } finally {
    loading.value = false
  }
}


const tabletar = ref<any>([])
// 加载工单列表（现在直接使用虚拟数据）
const loadWorkOrderList = () => {
  /* try {
    loading.value = true
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 直接使用虚拟数据
    initDummyData()
  } catch (error) {
    ElMessage.error('加载失败')
    // 如果出错，仍然使用虚拟数据
    initDummyData()
  } finally {
    loading.value = false
  } */
  APIs.get("/api/WorkOrder/GetWorkOrder", {
    params: {
      WorkCode: model.WorkCode,
      Type: model.Type || 0,
      Customername: model.Customername,
      States: model.States || 0,
      Scoure: model.Scoure || 0,
      PageIndex: paing.PageIndex,
      PageSize: paing.PageSize,


    }
  }).then(res => {
    tabletar.value = res.data.data.data;
    paing.totalCount = res.data.data.totalCount
    paing.total = res.data.data.total

    console.log(tabletar.value)
  })

}

// 重置表单
const resetForm = () => {
  Object.assign(formData, {
    code: generateCode(),
    type: '',
    status: '',
    customer: '',
    productMaster: '',
    processRoute: '',
    productionLine: '',
    dateRange: [],
    quantity: '',
    allowSkipProcess: false,
    remarks: ''
  })
}

// 取消按钮
const handleCancel = () => {
  logic.dialogVisible = false
  resetForm()
}

// 确定按钮
const handleConfirm = () => {
  /*   try {
      loading.value = true
      // 模拟API调用延迟
      await new Promise(resolve => setTimeout(resolve, 1000)) */

  if (logic.isEdit == true) {
    /*  // 编辑工单 - 模拟编辑成功
     const index = workOrderList.value.findIndex(item => item.id === logic.editingId) */
    /*  if (index > -1) {
       workOrderList.value[index] = {
         ...workOrderList.value[index],
         type: formData.type,
         status: formData.status || workOrderList.value[index].status,
         customer: formData.customer,
         productMaster: formData.productMaster,
         productionLine: formData.productionLine,
         quantity: parseInt(formData.quantity)
       }
     } */
    //ElMessage.success('编辑成功')

    APIs.post("/api/WorkOrder/UpdateWorkOrder", formData).then(res => {
      if (res.data.code == 100) {
        ElMessage.success(res.data.msg);
        loadWorkOrderList();
        logic.dialogVisible=false
      }
      else {
        ElMessage.error(res.data.msg);
        return;
      }
    })



  } else {


    APIs.post("/api/WorkOrder/AddWorkOrder", formData).then(res => {
      if (res.data.code == 100) {
        ElMessage.success(res.data.msg);
        loadWorkOrderList();
      }
      else {
        ElMessage.error(res.data.msg);
        return;
      }
    })




    // 新增工单 - 模拟新增成功
    /*  const newOrder: WorkOrder = {
       id: Date.now(),
       code: formData.workCode,
       type: formData.type,
       status: formData.states || '备料中',
       customer: formData.customerId,
       productMaster: formData.processroutId,
       productionLine: formData.productionlineId,
       processSteps: [
         { name: '后盖01', percentage: 0 },
         { name: '铣外形', percentage: 0 }
       ],
       quantity: parseInt(formData.workNum)
     }
     
     workOrderList.value.unshift({
       ...newOrder,
       index: 1
     })
     
     // 重新计算序号
     workOrderList.value.forEach((item, index) => {
       item.index = index + 1
     })
     
     total.value++
     ElMessage.success('新增成功') 
   } 
   
   logic.dialogVisible = false
   resetForm()
 } catch (error) {
   ElMessage.error('操作失败')
 } finally {
   loading.value = false
 }  */

  }
}


// 组件挂载
onMounted(() => {
  loadWorkOrderList()

})

//客户动态下拉
const custArray = ref<any>([])
const GetCust = () => {

  APIs.get("/api/WorkOrder/ShowClient").then(res => {
    custArray.value = res.data.data;
  })

}
//产品主数据
const ProductArray = ref<any>([])
const GetProduct = () => {
  APIs.get("/api/WorkOrder/GetProduct").then(res => {
    ProductArray.value = res.data.data;
  })
}
//工艺路线
const processrouteArray = ref<any>([])
const GetProcess = () => {
  APIs.get("/api/WorkOrder/GetProcessroute").then(res => {
    processrouteArray.value = res.data.data;
  })
}
//产线
const proction_lineArray = ref<any>([])
const GetProction = () => {
  APIs.get("/api/WorkOrder/GetProduction_line").then(res => {
    proction_lineArray.value = res.data.data;
  })
}

//订单
const Orders = ref<any>([])
const GetOrder = () => {
  DingDanAPI.get("/api/DingDan/QueryDingDan").then(res => {
    // 映射数据字段，确保字段名一致
    const dataArray = res.data.data || []
    Orders.value = dataArray.map((item: any) => ({
      id: item.id || item.Id || '',
      dingdanbianhao: item.dingdanbianhao || item.dingDanBianHao || item.DingDanBianHao || '',
      shopname: item.ShopName || item.shopName || item.shopname || '',
      kehuid: item.keHuName || item.kehuid || item.keHuId || item.KeHuId || ''
    }))
  })
}

</script>

<style scoped>
.work-order-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #303133;
}

.action-buttons {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.search-icon {
  margin-left: 5px;
  cursor: pointer;
  color: #909399;
}

.search-icon:hover {
  color: #409eff;
}

/* 工序进度样式 */
.process-progress-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  overflow-x: auto;
  min-width: 280px;
}

.process-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 60px;
}

.process-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f5f7fa;
  border: 2px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  position: relative;
  transition: all 0.3s ease;
}

.process-circle:hover {
  border-color: #409eff;
  background: #ecf5ff;
}

.circle-progress {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.percentage-text {
  font-size: 10px;
  font-weight: bold;
  color: #606266;
  line-height: 1;
}

.process-label {
  font-size: 11px;
  color: #606266;
  text-align: center;
  line-height: 1.2;
  max-width: 60px;
  word-break: break-all;
}

.process-connector {
  position: absolute;
  top: 20px;
  right: -4px;
  width: 8px;
  height: 2px;
  background: #e4e7ed;
  z-index: 1;
}

.process-connector::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -1px;
  width: 0;
  height: 0;
  border-left: 4px solid #e4e7ed;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .process-progress-container {
    min-width: 240px;
  }

  .process-step-item {
    min-width: 50px;
  }

  .process-circle {
    width: 35px;
    height: 35px;
  }

  .process-label {
    font-size: 10px;
    max-width: 50px;
  }
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.dialog-footer {
  text-align: right;
}

.dialog-footer .el-button {
  margin-left: 10px;
}

/* 表格样式优化 */
:deep(.el-table) {
  border-radius: 4px;
  overflow: hidden;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
}

:deep(.el-table td) {
  padding: 12px 0;
}

/* 按钮样式优化 */
:deep(.el-button--small) {
  padding: 5px 10px;
  margin-right: 5px;
}

:deep(.el-button--small:last-child) {
  margin-right: 0;
}
</style>
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
